<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习5：DOM操作</title>
    <style type="text/css">
        html,div,ul,li {margin: 0px;padding: 0px;}
        a{cursor: pointer;}
        li {list-style: none;cursor: pointer;}
        fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
        #cont_left {width: 300px;height: 500px;float: left;}
        #cont_right {float: left;}
        .newcss1{background-color: yellowgreen;}
    </style>
</head>
<body>
<!--179000612陈攀文-->
<div id="cont_left">
    <ul><img src="../image/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
        <ul id="menu1">
            <li onclick="showImg()"><img src="../image/doc.gif">获取原始图片路径</li>
            <li onclick="getFruit()"><img src="../image/doc.gif">获取我喜欢的水果</li>
        </ul>
    </ul>

    <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
        <ul id="menu2">
            <li onclick="createImg()"><img src="../image/doc.gif">创建图片</li>
            <li onclick="cloneImg()"><img src="../image/doc.gif">克隆图片</li>
            <li onclick="changeImg()"><img src="../image/doc.gif">改变图片</li>
            <li onclick="removeImg()"><img src="../image/doc.gif">删除图片</li>
        </ul>
    </ul>

    <ul><img src="../image/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
        <ul id="menu3">
            <li onclick="changeCss1()"><img src="../image/doc.gif">为原始图片加上行间样式</li>
            <li onclick="changeCss2()"><img src="../imagedoc.gif">为所有的fieldset加上内部样式</li>
        </ul>
    </ul>

</div>
<fieldset>
    <legend>原始图片</legend>
    <img id="fruit" src="../image/fruit.jpg">
</fieldset>
<fieldset>
    <legend>图片路径</legend>
    <p id="msg1">在这里显示</p>
</fieldset>
<fieldset>
    <legend>选择你喜欢的水果</legend>
    <ul style="text-align: left;">
        <li>
            <input name="enjoy" type="checkbox" value="苹果" />苹果
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="葡萄" />葡萄
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
        </li>
        <li>
            <input name="enjoy" type="checkbox" value="西瓜" />西瓜
        </li>
    </ul>
    <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
</fieldset>
<fieldset>
    <legend>创建图片</legend>
    <div id="msg3"></div>
</fieldset>
<fieldset>
    <legend>克隆图片</legend>
    <div id="msg4"></div>
</fieldset>
<script>
    //菜单收缩与扩展
    function show(title) {
        let currentMenu = document.getElementById(title);
        let currentStatus = currentMenu.style.display;
        currentMenu.style.display = currentStatus == "" ? "none" : "";
    }
    //获取原始图片路径
    function showImg() {
        let fruit=document.getElementById("fruit");
        let msg1=document.getElementById("msg1");
        msg1.innerHTML=fruit.getAttribute("src");
    }
    //获取喜欢的水果
    function getFruit() {
        let obj = document.getElementsByName("enjoy");
        let msg2=document.getElementById("msg2");
        let check_val = [];
        for (let k in obj) {
            if (obj[k].checked)
                check_val.push(obj[k].value);
        }
        msg2.innerHTML="你选择喜爱的水果是:"+check_val;
    }
    //创建图片
    function createImg() {
        let msg3=document.getElementById("msg3");
        msg3.innerHTML="<img src='../image/grape.jpg'>";
    }
    //克隆图片
    function cloneImg() {
        let fruit=document.getElementById("fruit");
        let msg4=document.getElementById("msg4");
        let fruit2=fruit.cloneNode(false);
        msg4.appendChild(fruit2);
    }
    //改变图片
    function changeImg() {
        let fruit=document.getElementById("fruit");
        fruit.setAttribute("src","../image/grape.jpg");
    }
    //删除图片
    function removeImg() {
        let fruit=document.getElementById("fruit");
        fruit.parentNode.removeChild(fruit);
    }
    //操作样式1
    function changeCss1(){
        let fruit=document.getElementById("fruit");
        fruit.style.border="6px red solid";
    }
    //操作样式2
    function changeCss2(){
        let fieldset=document.querySelectorAll("fieldset");
        for (let i=0;i<fieldset.length;i++){
            fieldset[i].style.backgroundColor="green";
        }
    }
</script>
</body>
<html>